import _ from 'lodash'
class ONBARECHARTS {
  constructor (charts, params, processMsg) {
    this.charts = charts
    this.timer = null
    this.params = params
    this.processMsg = processMsg
    this.toolIds = []
    this.minuteToolIds = []
    this.programs = []
    this.color = ['#FF8559', '#F7B72D', '#43D7C5', '#E33333', '#5F77FD', '#17D77F']
    this.categories = ['程序', '刀号']
    this.option = this._getOption()
  }
  _getOption () {
    return {
      title: {
        text: '程序',
        left: 'center',
        textStyle: {
          color: '#333333'
        }
      },
      grid: {
        left: '3%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'value',
          show: false,
          boundaryGap: true,
          splitLine: { show: false },
          min: 1,
          max: 7,
          axisTick: {
            alignWithLabel: true,
            interval: 'atuo'
          },
          axisLabel: {
            color: '#333333'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          position: 'top'
        },
        {
          type: 'category',
          show: true,
          splitLine: { show: false },
          boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333333'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d3d3d3'
            }
          },
          position: 'bottom',
          data: []
        }
      ],
      yAxis:
        {
          type: 'category',
          data: this.categories,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333333',
              interval: 'atuo'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d3d3d3'
            }
          }
        },
      series: [
        {
          name: '刀号',
          type: 'bar',
          tooltip: { show: false },
          stack: '总量',
          barWidth: 18, // 最小柱高
          data: [
            {
              value: [7, 1],
              label: {
                formatter: ''
              },
              itemStyle: {
                color: '#FF8559'
              }
            }
          ],
          label: {
            fontSize: '12',
            color: '#333333',
            show: true, // 显示文本
            position: 'inside' // 数据值位置
          }
        },
        {
          name: '程序',
          type: 'bar',
          tooltip: { show: false },
          stack: '总量',
          barWidth: 18, // 最小柱高
          data: [
            {
              value: [7, 0],
              label: {
                formatter: ''
              },
              itemStyle: {
                color: '#FF8559'
              }
            }
          ],
          label: {
            fontSize: '12',
            color: '#333333',
            show: true, // 显示文本
            position: 'inside' // 数据值位置
          }
        }
      ]
    }
  }
  _setProcessMsg (val) {
    this.processMsg = val
    if (_.last(this.toolIds) !== val.tool_id) {
      this.toolIds.push(val.tool_id)
    }
    if (_.last(this.programs) !== val.program) {
      this.programs.push(val.program)
    }
  }
  _setOption () {
    this.charts.setOption(this.option)
  }
  // 刀号
  getChangeSer () {
    let axisData = (new Date()).toLocaleTimeString('chinese', { hour12: false }).replace(/^\D*/, '')
    let t
    if (this.toolIds.length > 100) {
      this.toolIds = []
      this.programs = []
      this.option = this._getOption()
    }
    t = this.toolIds
    let m = this.option.series[0].data
    if (t.length === 1) {
      m[0].label.formatter = t[0]
    }
    if (t.length > 1) {
      m[t.length - 1] = {
        value: [7, 1],
        label: {
          formatter: t[t.length - 1]
        },
        itemStyle: {
          color: this.gerRandomzColor(t.length)
        }
      }
      for (let i = 2; i < 6; i++) {
        if (m[t.length - i]) {
          m[t.length - i].value[0] += -1
        }
      }
      m.map(v => {
        if (v.value[0] <= 1) {
          v.label.formatter = ''
        }
      })
    }
    this.option.xAxis[1].data.length === 7 && this.option.xAxis[1].data.shift()
    this.option.xAxis[1].data.push(axisData)
  }
  // 程序
  setChangeSer () {
    let t = this.programs
    let n = this.option.series[1].data
    if (t.length === 1) {
      n[0].label.formatter = t[0]
    }
    if (t.length > 1) {
      n[t.length - 1] = {
        value: [7, 0],
        label: {
          formatter: t[t.length - 1]
        },
        itemStyle: {
          color: this.gerRandomzColor(t.length)
        }
      }
      for (let i = 2; i < 6; i++) {
        if (n[t.length - i]) {
          n[t.length - i].value[0] += -1
        }
      }
      n.map(v => {
        if (v.value[0] === 2) {
          v.label.formatter = ''
        }
      })
    }
  }
  gerRandomzColor (val) {
    if (val > 5) {
      val = val % 5
    }
    return this.color[val]
  }
  _setIntOption () {
    const that = this
    this.timer = setInterval(() => {
      that.getChangeSer()
      that.setChangeSer()
      that._setOption()
    }, 1000)
    return this.timer
  }
  clearSetint () {
    this.toolIds = []
    this.programs = []
    this.minuteToolIds = []
    this.charts && this.charts.dispose()
    this.charts = null
    clearInterval(this.timer)
  }
}
export default ONBARECHARTS
